import * as React from "react"
import { ITradeModul } from "../types"
import {
	getArrayMerchantOrderIds,
	getUserPropsByExchange,
	getTimeDate,
} from "../common"
import {
	NavigationTabs,
	FilterP2POrders,
	ListP2POrders,
	FilterUserAdvs,
	ListUserAdvs,
	FilterUserOrders,
	ListUserOrders,
	UserBalances,
	FilterUserReports,
	ReportPanel,
	UserFavorites,
	ListFavoriteAdvs,
	EditAdvModalBN,
	EditAdvModalPX,
	SettingsPanel,
	DemoModeMessage,
	AdditionalPanel,
} from "../components"

export const TradeModul: React.FC<ITradeModul> = props => {
	const {
		// exchangeActive,
		filterDetails,
		userProfile,
		userOrderStatuses,
		fundingRates,
		spreads,
		getHistorySpotOrders,
		getActiveSpotOrders,
		reportCost,
		reportStats,
		reportBalances,
		reportMerchantOrders,
		reportSpotOrders,
		loading,
		dataConstants,
		objExchange,
		scrollStyle,
		logoutUser,
		loginUser,
		updateUser,
		updateItemDetails,
		getListOption,
		getP2POrders,
		getMerchantOrders,
		getMerchantDetails,
		getMerchantAdvs,
		changeAdvStatus,
		getEditableAdv,
		getEditableOrder,
		insertOrderToDB,
		insertNewItemToDB,
		checkOrderStatuses,
		getBalances,
		transferAsset,
		getReportOrders,
		getGroupItems,
		getDataTickers,
		getFundingRates,
		getSpreads,
		saveSpreads,
		updateAdv,
		handlerAdvDetails,
		handlerFilterDetails,
		handlerPopupWindow,
		handlerUserProfile,
	} = props

	const { id, shortName } = objExchange
	const userPropsByExchange = getUserPropsByExchange(
		id,
		userProfile.userProperties
	)

	const {
		favoriteAdvs,
		payTypeList,
		updateOrders,
		p2pOrders,
		merchantOrders,
		merchantAdvs,
		merchantPayMethods,
		currentBalances,
		exchangeUserId,
		favorites,
	} = userPropsByExchange

	const {
		orderExchange,
		// checkboxStatus,
		orderCoin,
		orderTradeType,
		orderStatusType,
		orderPayType,
		advActiveStatus,
	} = filterDetails

	const countFavoriteAdvs = favoriteAdvs
		? favoriteAdvs.buyList.concat(favoriteAdvs.sellList).length
		: null

	const arrFilterTypes = [
		{ filter: "orderCoin", value: orderCoin },
		{ filter: "orderTradeType", value: orderTradeType },
		{ filter: "orderStatusType", value: orderStatusType },
		{ filter: "orderPayType", value: orderPayType },
		{ filter: "orderExchange", value: orderExchange },
		{ filter: "advActiveStatus", value: advActiveStatus },
	]

	return (
		<div id={`modul-${shortName}`}>
			<NavigationTabs
				userProfile={userProfile}
				loading={loading}
				postfix={shortName}
				logoutUser={logoutUser}
				loginUser={loginUser}
				handlerPopupWindow={handlerPopupWindow}
				handlerFilterDetails={handlerFilterDetails}
			/>
			{userProfile.auth ? (
				<div className="tab-content" id={`pills-tabContent-${shortName}`}>
					{/* P2POrders */}
					<div
						className="tab-pane fade show active"
						id={`pills-orders-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-orders-tab-${shortName}`}
					>
						<FilterP2POrders
							userProps={{
								userId: userProfile.id,
								userPayTypesList: payTypeList,
								sellingPriceUSDT: userProfile.advSell,
							}}
							objExchange={objExchange}
							arrPayTypes={dataConstants.paytypes}
							currentCourses={dataConstants.tickers}
							getListOption={getListOption}
							getP2POrders={getP2POrders}
							handlerPopupWindow={handlerPopupWindow}
							handlerUserProfile={handlerUserProfile}
						/>
						<ListP2POrders
							userProps={{
								// p2pOrders: p2pOrdersVisible,
								p2pOrders,
								userId: userProfile.id,
								userAuth: userProfile.auth,
								exchangeUserId,
								favorites,
								sellingPriceUSDT: userProfile.advSell,
							}}
							objExchange={objExchange}
							currentCourses={dataConstants.tickers}
							scrollStyle={scrollStyle}
							updateUser={updateUser}
							getEditableAdv={getEditableAdv}
							handlerPopupWindow={handlerPopupWindow}
							handlerUserProfile={handlerUserProfile}
						/>
					</div>
					{/* UserAdvs */}
					<div
						className="tab-pane fade"
						id={`pills-ads-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-ads-tab-${shortName}`}
					>
						<FilterUserAdvs
							userId={userProfile.id}
							objExchange={objExchange}
							arrFilterTypes={arrFilterTypes}
							getListOption={getListOption}
							getMerchantAdvs={getMerchantAdvs}
							handlerPopupWindow={handlerPopupWindow}
							handlerFilterDetails={handlerFilterDetails}
						/>
						<ListUserAdvs
							advs={merchantAdvs}
							userId={userProfile.id}
							scrollStyle={scrollStyle}
							currentCourses={dataConstants.tickers}
							objExchange={objExchange}
							getEditableAdv={getEditableAdv}
							changeAdvStatus={changeAdvStatus}
							handlerPopupWindow={handlerPopupWindow}
						/>
					</div>
					{/* UserOrders */}
					<div
						className="tab-pane fade"
						id={`pills-myorders-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-myorders-tab-${shortName}`}
					>
						<FilterUserOrders
							userId={userProfile.id}
							userAuth={userProfile.auth}
							objExchange={objExchange}
							merchantPayMethods={merchantPayMethods}
							getListOption={getListOption}
							getMerchantOrders={getMerchantOrders}
							handlerPopupWindow={handlerPopupWindow}
							handlerFilterDetails={handlerFilterDetails}
							handlerUserProfile={handlerUserProfile}
							insertOrderToDB={insertOrderToDB}
							updateUser={updateUser}
							updateOrders={updateOrders}
							arrOrderIds={
								shortName === "GT" ||
								shortName === "HB" ||
								shortName === "BG" ||
								shortName === "BX" ||
								shortName === "XG" ||
								shortName === "CN" ||
								shortName === "CM" ||
								shortName === "XT"
									? merchantOrders
									: getArrayMerchantOrderIds(shortName, merchantOrders)
							}
						/>
						<ListUserOrders
							objExchange={objExchange}
							merchantOrders={merchantOrders}
							currentCourses={dataConstants.tickers}
							scrollStyle={scrollStyle}
							userId={userProfile.id}
							getEditableOrder={getEditableOrder}
							postfix={shortName}
						/>
					</div>
					{/* Balances */}
					<div
						className="tab-pane fade"
						id={`pills-balances-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-balances-tab-${shortName}`}
					>
						<UserBalances
							userId={userProfile.id}
							objExchange={objExchange}
							currentCourses={dataConstants.tickers}
							balances={currentBalances}
							scrollStyle={scrollStyle}
							getBalances={getBalances}
							transferAsset={transferAsset}
							handlerPopupWindow={handlerPopupWindow}
						/>
					</div>
					{/* Reports */}
					<div
						className="tab-pane fade"
						id={`pills-reports-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-reports-tab-${shortName}`}
					>
						<FilterUserReports
							userProps={{
								userId: userProfile.id,
								userStatus: userProfile.status,
							}}
							dataConstants={dataConstants}
							getReportOrders={getReportOrders}
							handlerPopupWindow={handlerPopupWindow}
							reportDateRange={{
								startDate:
									reportMerchantOrders.length === 0
										? "--/--/----"
										: getTimeDate(
												reportMerchantOrders[reportMerchantOrders.length - 1].dateOrder
										  ).split(" ")[0],
								endDate:
									reportMerchantOrders.length === 0
										? "--/--/----"
										: getTimeDate(reportMerchantOrders[0].dateOrder).split(" ")[0],
							}}
						/>
						<ReportPanel
							userProfile={userProfile}
							dataConstants={dataConstants}
							getGroupItems={getGroupItems}
							handlerPopupWindow={handlerPopupWindow}
							merchantPayMethods={merchantPayMethods}
							currentCourses={dataConstants.tickers}
							scrollStyle={scrollStyle}
							getHistorySpotOrders={getHistorySpotOrders}
							getActiveSpotOrders={getActiveSpotOrders}
							reportStats={reportStats}
							reportCost={reportCost}
							reportBalances={reportBalances}
							reportMerchantOrders={reportMerchantOrders}
							reportSpotOrders={reportSpotOrders}
							handlerFilterDetails={handlerFilterDetails}
							getEditableOrder={getEditableOrder}
						/>
					</div>
					{/* Favorites */}
					<div
						className="tab-pane fade"
						id={`pills-favorites-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-favorites-tab-${shortName}`}
					>
						<div className="container">
							<div className="row d-flex justify-content-between">
								<ul
									className="nav nav-pills mb-3"
									id={`faviritesTabs-${shortName}`}
									role="tablist"
								>
									<li className="nav-item">
										<a
											className="nav-link active"
											id={`listFavoritesTab-${shortName}`}
											data-toggle="pill"
											href={`#listFavorites-${shortName}`}
											role="tab"
											aria-controls={`listFavorites-${shortName}`}
											aria-selected="true"
										>
											ListFavorites
										</a>
									</li>
									<li className="nav-item">
										<a
											className="nav-link"
											id={`advsFavoritesTab-${shortName}`}
											data-toggle="pill"
											href={`#advsFavorites-${shortName}`}
											role="tab"
											aria-controls={`advsFavorites-${shortName}`}
											aria-selected="false"
										>
											AdvsFavorites {countFavoriteAdvs}
										</a>
									</li>
								</ul>
							</div>
							<div
								className="tab-content"
								id={`faviritesTabsContent-${shortName}`}
							>
								<div
									className="tab-pane fade show active"
									id={`listFavorites-${shortName}`}
									role="tabpanel"
									aria-labelledby={`listFavoritesTab-${shortName}`}
								>
									<UserFavorites
										loading={loading}
										userProfile={userProfile}
										objExchange={objExchange}
										getMerchantDetails={getMerchantDetails}
										updateUser={updateUser}
										handlerUserProfile={handlerUserProfile}
									/>
								</div>
								<div
									className="tab-pane fade"
									id={`advsFavorites-${shortName}`}
									role="tabpanel"
									aria-labelledby={`advsFavoritesTab-${shortName}`}
								>
									{countFavoriteAdvs === null ? null : (
										<ListFavoriteAdvs
											currentCourses={dataConstants.tickers}
											favoriteAdvs={favoriteAdvs}
											scrollStyle={scrollStyle}
										/>
									)}
								</div>
							</div>
						</div>
					</div>
					{/* Settings */}
					<div
						className="tab-pane fade"
						id={`pills-settings-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-settings-tab-${shortName}`}
					>
						<SettingsPanel
							userProfile={userProfile}
							userOrderStatuses={userOrderStatuses}
							filterDetails={filterDetails}
							dataConstants={dataConstants}
							getGroupItems={getGroupItems}
							handlerPopupWindow={handlerPopupWindow}
							handlerUserProfile={handlerUserProfile}
							handlerFilterDetails={handlerFilterDetails}
							checkOrderStatuses={checkOrderStatuses}
							updateUser={updateUser}
							updateItemDetails={updateItemDetails}
							insertNewItemToDB={insertNewItemToDB}
							scrollStyle={scrollStyle}
						/>
					</div>
					{/* AdditionalServices */}
					<div
						className="tab-pane fade"
						id={`pills-services-${shortName}`}
						role="tabpanel"
						aria-labelledby={`pills-services-tab-${shortName}`}
					>
						<AdditionalPanel
							handlerPopupWindow={handlerPopupWindow}
							getDataTickers={getDataTickers}
							getFundingRates={getFundingRates}
							getSpreads={getSpreads}
							saveSpreads={saveSpreads}
							fundingRates={fundingRates}
							spreads={spreads}
							userId={userProfile.id}
							scrollStyle={{
								height: scrollStyle.height - 100,
								width: scrollStyle.width,
							}}
						/>
					</div>
				</div>
			) : (
				<DemoModeMessage />
			)}
			<EditAdvModalBN
				userId={userProfile.id}
				objExchange={objExchange}
				filterDetails={filterDetails}
				currentCourses={dataConstants.tickers}
				merchantPayMethods={merchantPayMethods}
				p2pBalance={currentBalances.p2pBalance}
				updateAdv={updateAdv}
				handlerAdvDetails={handlerAdvDetails}
				handlerPopupWindow={handlerPopupWindow}
				handlerFilterDetails={handlerFilterDetails}
			/>
			<EditAdvModalPX
				userId={userProfile.id}
				objExchange={objExchange}
				filterDetails={filterDetails}
				currentCourses={dataConstants.tickers}
				merchantPayMethods={merchantPayMethods}
				p2pBalance={currentBalances.p2pBalance}
				updateAdv={updateAdv}
				handlerAdvDetails={handlerAdvDetails}
				handlerPopupWindow={handlerPopupWindow}
				handlerFilterDetails={handlerFilterDetails}
			/>
		</div>
	)
}
